
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片随鼠标展现</title>
	<style>
		#wrap {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
	<script>
		window.onload = function(){
			var oWrap = document.getElementById('wrap'),
				aDiv = oWrap.getElementsByTagName('div'),
				len = 110,
				str = '';
			for(var i=0; i<len; i++){
				str += '<div style="opacity: 0.2; transition: 0.5s; width: 50px; height: 50px; position: absolute; top: ' + Math.floor(i/10)*52 + 'px; left: ' + i%10*52 + 'px; background: url(2-img/pic.jpg) ' + (-i%10*52) + 'px ' + (-Math.floor(i/10)*52) + 'px"></div>';
			}
			oWrap.innerHTML = str;
			for(var i=0; i<aDiv.length; i++){
				aDiv[i].onmouseover = function(){
					this.style.opacity = 1;
					this.style.transform = 'scale(1.5)';
				}
				aDiv[i].onmouseout = function(){
					this.style.transform = 'scale(1)';
				}
			}
		}
	</script>
</head>
<body>
	<div id="wrap"></div>
</body>
</html>